<template>
    <div>
        <Form :label-width="80" inline>
            <FormItem label="消息类型">
                <Select v-model="page.action_data.m_type" style="width:200px">
                    <Option value="-1">全部</Option>
                    <Option value="0">系统消息</Option>
                    <Option value="1">邮箱</Option>
                    <Option value="2">短信</Option>
                </Select>
            </FormItem>
            <FormItem label="消息状态">
                <Select v-model="page.action_data.status" style="width:200px">
                    <Option value="-1">全部</Option>
                    <Option value="0">未读</Option>
                    <Option value="1">已读</Option>
                    <Option value="2">已回收</Option>
                    <Option value="9">发送失败</Option>
                </Select>
            </FormItem>
            <Button type="ghost" @click="handleSearch()">搜索</Button>
        </Form>
        <AutoTable :columns="table.columns" :data="list" :page="page"></AutoTable>
        <Modal v-model="modal1" title="消息详情" :width="80" :mask-closable="true">
            <div>详情</div>
        </Modal>
    </div>
</template>
<script>
import Page from "@/common/model/Page";
import AutoTable from "@/common/components/AutoTable";
import parent from "../Parent";
export default {
    extends: parent,
    components: {
        AutoTable
    },
    data(){
        return{
            modal1: false,
            page: new Page("search/message", { m_type: "-1", status: "-1", search: ""}), //分页查询接口
            table: {
                columns: [
                    {
                        title: '序号', width: 65, align: 'center', render: (h, params) => {
                            return h('div', (this.page.current_page - 1) * this.page.page_size + params.index + 1);
                        }
                    },
                    {
                        title: '标题', key: 'title'
                    },
                    {
                        title: '消息类别', width: 200, align: 'center', render: (h, params) => {
                            return h('div', ["系统消息", "邮件", "短信"][params.row.m_type]);
                        }
                    },
                    {
                        title: '发布日期', width: 150, align: 'center', key: 'create_time', sortable: "custom", render: (h, params) => {
                           return h('div', new Date(parseInt(params.row.create_time)).toLocaleDateString()+" "+new Date(parseInt(params.row.create_time)).getHours()+":"+new Date(parseInt(params.row.create_time)).getMinutes());
                        }
                    },
                    {
                        title: '状态', width: 100, align: 'center', key: 'status', sortable: "custom", render: (h, params) => {
                            return h('div', { 
                                style: { backgroundColor: ["#5a5", "orange", "gray", "","","","","","", "red"][params.row.status], color: "#fff", padding: "2px 5px", borderRadius: "5px" }
                            }, ["未读", "已读", "已回收", "","","","","","", "发送失败"][params.row.status]);
                        }
                    },
                    // {
                    //     title: '操作', key: 'action', width: 200, align: 'center', render: (h, params) => {
                    //         return h('div', [
                    //             h('Button', {
                    //                 props: { type: 'ghost', size: 'small' },
                    //                 style: { marginRight: '5px', display: "none" },
                    //                 on: { click: () => { this.handleShowDetail(params.row) } }
                    //             }, '详情'),
                    //             h('Button', {
                    //                 props: { type: 'primary', size: 'small', disabled: params.row.status != 9 },
                    //                 style: { marginRight: '5px' },
                    //                 on: { click: () => { this.handleReSend(params.row.id) } }
                    //             }, '重新发送')
                    //         ]);
                    //     }
                    // }
                ],
            },
            current: {}
        }
    },
    computed: {
        list() {
            return this.page.list;
        }
    },
    methods:{
        handleSearch() {
            this.page.getData();
        }
        // handleShowDetail(row) {
        //     this.modal1 = true;
        //     this.current = row;
        // },
        // handleReSend(id) {
        //     this.api.post("message/re_send", { id: id }, res => {
        //         this.$CustomMessage.success("重新发送成功！");
        //     });
        // }
    }
};
</script>
